iT邦幫忙

DAY 18
1

Sass3.3 & CSS設計模式系列 第 19

Sass教學 (18) - susy2 - Toolkit - gutter、container

  • 分享至 

  • xImage
  •  

Yes
影片教學請點選下圖連結↓

以下文章同步於Github

範例程式碼
susy2 - Gutters

Gutters
支援function、mixin的寫法,
格式:gutters($span)
備用:gutter($span)
$span:<span>
使用gutter與gutters的目的是如果你希望獲得1gutter的寬度時,
那就很適合使用他,例如下述程式碼:

//編譯出來會向左推一個gutter
margin-left: gutter();

//如果今天你設定的元素所在的父欄是10欄,就必須這樣子寫  
margin-left: gutter(10);

//這樣寫並不是左推一個gutter的意思
//gutter裡面寫的數字意思是你父欄佔了你幾個columns的意思
margin-left: gutter(1);  

上面的用法是function的寫法,
你也可以使用Mixin的方式,
但編譯出來的gutter則會依照你的gutter-position設定而有所變化,
如下程式碼:

//如果gutter-position是after則會編譯margin-right
//假使是split,則是編譯padding-left與padding-right
.item { @include gutters; }

//你也可以直接寫固定值上去
.item{@include guttters(3em)}

或者你想改變gutter的屬性,
也可以使用$span來改寫,

// 強制gutter是gutter-position為inside
.item { @include gutters(3em inside); }

// 將gutter-position為after,是以10欄,guuter寬是1/3來編譯出來
.item { @include gutters(10 1/3 after); }

container
支援function、mixin的寫法,
格式:container($layout)
$layout:<layout>

container也有functioin與mixin的寫法:

//依照你的Sass Maps的設定編譯出寬度
.main{
    width: container()
}

//也可以寫container是幾個column的寬度
$large-breakpoint: container: container(12);

使用mixin的話,可以這樣子寫:

//直接寫死總寬度,Sass Maps的column-width會依照gutter自行編譯出對應寬度
body{
    @include container(960px);
}

//也可以直接在裡面載入Sass Maps進去
body{
    @include container(12 1/3 center)
}

Nested Context
支援function、mixin的寫法,
格式:nested($span)
備用:nested($span)
$span:<span>

在上個章節講span的時候就有提到,
如果你父元素佔了5 columns的話,
子元素要寫佔1 columns時,
如果你這樣寫就錯了:

//此為錯誤程式碼
.main{
    @include span(5)
    .inner{
        @include span(1)
    }
}

.main裡面的子排版元素.inner如果是這樣編譯會是錯的, 因為susy並不知道.inner是在.main裡面,
所以你可以這樣子寫:

.main{
    @include span(5)
    .inner{
    //加上of,span就會依照它來編譯
        @include span(1 of 5)   }
}

或者寫到span(5){@content}裡面:

.main{
    @include span(5){
        .inner{
            //因為是包在span裡面,所以在5cloumns裡面編譯,所以就不用寫of了
            @include span(1)
        }
    }
}

但如果你是用nested的寫法的話,
可以這樣子寫:

.main{
    @include span(5);
    @include nested(5) {
        .inner { @include span(1); }
    }
}

可以看得出來nested就是建立一個總columns的環境,
裡面編譯出來的span就會依照該條件去編譯對應的程式碼。

我自己是沒有在用這個方法,
應該說是我找不太時機使用,
所以我都還是用前兩個span(1 of 5)與span(){@content}來解決這樣的問題。


上一篇
Sass教學 (17) - susy2 - Toolkit - Span Mixin、function
下一篇
Sass教學 (19) - susy2 - Toolkit - Rows & Edges
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言